<template>
  <div class="header-right">
    <el-cascader
      v-model="current"
      :options="list"
      :show-all-levels="false"
      @change="handleChangeLine"
    ></el-cascader>
    <el-date-picker
      v-model="currentDate"
      type="date"
      placeholder="选择日期"
      class="current-date"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      :clearable="false"
      @change="handleChangeDate"
    >
    </el-date-picker>
  </div>
</template>

<script>
import { listAllFactorys } from "@/api/factory";
import { getNowTimeProduceDate } from "@/api/dashboard/blowIrriagtionSpinLineDaily";
import { findTreeNode } from "@/utils/tree";
export default {
  data() {
    return {
      list: [],
      current: [],
      currentDate: null,
      defaultProduceDate: null, //当前生产日期
    };
  },
  created() {
    Promise.all([
      listAllFactorys(),
      getNowTimeProduceDate({
        nowTime: this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
      }),
    ]).then(([res1, res2]) => {
      if (res1?.data) {
        res1.data.forEach((factory) => {
          let item1 = {
            value: factory.factoryDeptCode,
            label: factory.factoryName,
            children: [],
          };
          factory.workshopVos?.forEach((workshop) => {
            //包装车间下可选
            if (workshop.workshopType == "BLOW_IRRIAGTION_SPIN") {
              let item2 = {
                value: workshop.workshopId,
                label: workshop.workshopName,
                children: workshop.productionLineVos.map((line) => ({
                  value: line.lineId,
                  label: line.lineName,
                  properties: { ...line, workshopName: workshop.workshopName },
                })),
              };
              item1.children.push(item2);
            }
          });
          this.list.push(item1);
        });

        // 默认选中二号产线
        this.current = ["CRB-AK1", "10", "4"];
      }

      this.defaultProduceDate = res2?.data || null;

      this.currentDate =
        res2?.data || this.parseTime(new Date(), "{y}-{m}-{d}");

      if (this.current?.length && this.currentDate) {
        this.handleChangeLine(this.current);
      }
    });
  },
  methods: {
    handleChangeLine(value) {
      const item = findTreeNode(this.list, (node) => {
        return node.value == value[2];
      });
      this.$emit("change", {
        lineItem: item,
        dateItem: this.currentDate,
        defaultProduceDate: this.defaultProduceDate,
      });
    },
    handleChangeDate(value) {
      const current = findTreeNode(this.list, (node) => {
        return node.value == this.current[2];
      });
      this.$emit("change", {
        lineItem: current,
        dateItem: value,
        defaultProduceDate: this.defaultProduceDate,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-right {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.current-date {
  width: 140px;
}
::v-deep .el-input.el-input--suffix {
  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background: linear-gradient(180deg, #24439f 0%, #102066 100%);
    box-shadow: inset 0px 0px 9px 2px rgba(0, 146, 255, 0.89);
    border: 1px solid #6bbaff;
    border-radius: 30px;
    color: #fff;
    height: 30px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
    left: -25px;
  }

  // 符号的位置会错乱，进行修正（垂直）
  .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .el-input__inner::placeholder {
    color: #fff;
  }

  .el-icon-arrow-up:before {
    color: #fff;
  }
}

::v-deep {
  .el-cascader--medium {
    width: 200px;
    font-size: 14px;
    line-height: 36px;
    margin-right: 10px;
  }
  .el-input--medium {
    font-size: 14px;
  }
  .el-input--medium .el-input__inner {
    line-height: 36px;
    padding-right: 30px;
  }
  .el-input__suffix {
    right: 5px;
  }
  .el-input--medium .el-input__icon {
    line-height: 30px;
  }
  .el-cascader .el-input .el-icon-arrow-down {
    font-size: 14px;
  }
}
</style>
